<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽图像，并显示图像</title>
</head>
<body>
<div id="panel" style="background:red;width:50px;height:50px"></div>

<p/>

<label id="label"></label>

<label>请将图像文件拖动到这个红色区域</label>

<p/>
<img id="image" style="width:auto;height:auto;max-width:300px;max-height:300px"/>

<script type="text/javascript">
    panel.ondragover = ()=>{
        return false;
    }

    // 放下事件
    panel.ondrop = (e) => {
        e.preventDefault();
        for(let f of e.dataTransfer.files) {
            image.src = f.path;
            break;
        }
        return false;
    }
</script>
</body>
</html>
